<template>
	<view class="content">
		<view class="dayWeekMain">
			<view class="dayWeekBox" :class="[ item.state ? 'selBg2' : 'selBg1' ]" v-for="(item,index) in dayWeekList"
				:key="index" @click="selDayWeek(index,item)">
				<text class="textSize font22" :class="!item.type ? 'hui' : '' ">{{ item.week }}</text>
				<text class="textSize font26" :class="!item.type ? 'hui' : '' ">{{ item.monDate }}</text>
			</view>
		</view>
		<view class="titles font28 fontw">
			今日预约
		</view>
		<view class="box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<uniSteps :options="stepslist"></uniSteps>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniSteps from '@/components/wangxiaohua--steps/index.vue';
	export default {
		components: { uniSteps },
		data() {
			return {
				days: '1,2,3,4,5,6,7',
				dayWeekList: [],
				scrollTop: 0,
				stepslist: [{
					time: "12:00",
					name: "工单产生1",
					person: 'WUHYDS'
				}, {
					time: "12:00",
					name: "工单产生1",
					person: 'WUHYDS'
				}, {
					time: "12:00",
					name: "工单产生1",
					person: 'WUHYDS'
				}, {
					time: "12:00",
					name: "工单产生1",
					person: 'WUHYDS'
				}, {
					time: "12:00",
					name: "工单产生1",
					person: 'WUHYDS'
				}, {
					time: "12:00",
					name: "工单产生1",
					person: 'WUHYDS'
				}, {
					time: "12:00",
					name: "工单产生1",
					person: 'WUHYDS'
				}]
			};
		},
		onLoad() {
			this.dayWeekArray()
			this.getCurrentTime()
		},
		methods: {
			dayWeekArray() {
				const selectedDays = this.days.split(",").map(Number);
				const now = new Date();
				const today = now.getDay(); //0-6，0代表周日
				const daysToAdd = selectedDays.map((day) => (day >= today ? day - today : 7 - (today - day))).sort((a, b) => a -
					b);
				for (const daysToAdd of daysToAdd) {
					const newDate = new Date(now);
					newDate.setDate(newDate.getDate() + daysToAdd);
					const year = newDate.getFullYear();
					const month = String(newDate.getMonth() + 1).padStart(2, "0");
					const date = String(newDate.getDate()).padStart(2, "0");
					let week = "";
					switch (newDate.getDay()) {
						case 0:
							week = "Sun";
							break;
						case 1:
							week = "Mon";
							break;
						case 2:
							week = "Tue";
							break;
						case 3:
							week = "Wed";
							break;
						case 4:
							week = "Thu";
							break;
						case 5:
							week = "Fri";
							break;
						case 6:
							week = "Sat";
							break;
					}
					this.dayWeekList.push({
						year: year,
						month: month,
						monDate: date,
						week: week,
						state: false,
						type: true
					});
				}
			},

			//选择时间
			selDayWeek(index, item) {
				if (!this.dayWeekList[index].type) {
					return
				}
				if (this.dayWeekList[index].state) {
					this.dayWeekList[index].state = false;
					console.log('未选中')
				} else {
					for (let i in this.dayWeekList) {
						this.dayWeekList[i].state = false;
					};
					this.dayWeekList[index].state = true;
					console.log('已选中：' + item.year + '/' + item.monDate + '/' + item.week)
				}
			},
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				this.dayWeekList.map(item => {
					if (item.year < year) {
						item.type = false
					} else {
						if (item.month < month) {
							item.type = false
						}
					}
					if (item.monDate == day) {
						item.state = true
					}
				})
			},
			scrolltolower() {}
		}
	}
</script>

<style lang="scss">
	.content {
		.dayWeekMain {
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 29rpx 17rpx 53rpx 32rpx;
			background-color: #fff;

			.dayWeekBox {
				width: 82rpx;
				height: 99rpx;
				border-radius: 21rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.textSize {}

				.hui {
					color: #33333350;
				}
			}

			.selBg1 {
				background: #fff;
				color: #000;
			}

			.selBg2 {
				background: #1EB481;
				color: #fff;
			}
		}

		.titles {
			margin-top: 28rpx;
			margin-bottom: 31rpx;
			padding-left: 42rpx;
		}

		.box {
			.scroll-Y {
				height: calc(100vh - 320rpx);
			}
		}
	}
</style>